<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Layui 选项卡的使用</title>

    <!-- 第一：导入 Layui css 文件 -->
    <link href="layui/css/layui.css" rel="stylesheet">
</head>
<body>
    <!-- 第三：结构化页面 - 参考文档（HTML、CSS）- CV -->

    <!-- 注意：所有的组件都提供了相关预设的class，参考文档灵活使用 -->
    <!-- 1.选项卡的根节点 -->
    <div class="layui-tab" lay-filter="test-handle" lay-allowclose="true">
        <!-- 2.选项卡的标题 -->
        <ul class="layui-tab-title">
            <li lay-id="11">标签1</li>
            <li lay-id="22">标签2</li>
            <li lay-id="33">标签3</li>
            <li lay-id="44">标签4</li>
            <li class="layui-this" lay-id="55">标签5</li>
        </ul>

        <!-- 3.选项卡的内容 -->
        <div class="layui-tab-content">
            <div class="layui-tab-item">内容-1</div>
            <div class="layui-tab-item">内容-2</div>
            <div class="layui-tab-item">内容-3</div>
            <div class="layui-tab-item">内容-4</div>
            <div class="layui-tab-item layui-show">内容-5</div>
        </div>
    </div>

<div class="layui-btn-container">
    <button class="layui-btn layui-btn-primary layui-border-blue" lay-on="tabAdd">新增 tab 项</button>
    <button class="layui-btn" lay-on="tabDelete">删除「标签4」</button>
    <button class="layui-btn" lay-on="tabChange">切换到「标签3」</button>
</div>

<!-- 第二：导入 Layui js 文件 -->
<script src="layui/layui.js"></script>
<script>

    // 使用 Layui 相关的模块 - layui.use(function(){}) ;
    layui.use(function(){
        // 获取 element 模块  - 通过 element.xxx 实现对选项卡进行相关操作
        var element = layui.element;

        // 获取 util 模块 - 监听事件
        var util = layui.util;

        // 普通事件
        util.on('lay-on', {
            tabAdd: function(){
                // 新增一个 tab 项
                var label = (Math.random()*1000|0); // 标记 - 用于演示
                element.tabAdd('test-handle', {
                    title: '新选项'+ label,
                    content: '内容-'+ label,
                    id: new Date().getTime(), // 实际使用一般是规定好的id，这里以毫秒数模拟
                    change: true // 是否添加完毕后即自动切换
                })
            },
            tabDelete: function(btn){
                // 删除指定 tab 项
                element.tabDelete('test-handle', '44');

                // 通过添加一个 class ,实现禁用按钮
                btn.addClass('layui-btn-disabled');
            },
            tabChange: function(){
                // 切换到指定 tab 项
                element.tabChange('test-handle', '33');
            }
        });
    });
</script>

</body>
</html>